<template>
  <div class="app-container">
    <div class="tabs-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in tablist" :label='item.label + " (" +item.num + ")"' :name="item.index" :key="index">
          <div class="operation">
            <el-button type="primary" icon="el-icon-plus" @click="handleAddDemand">提任务</el-button>
            <span class="text1">
              共<span class="red-text">{{ item.num }}</span>个任务
            </span>
            <div class="right">
              <el-input
                class="input"
                placeholder="查找项目、负责人等"
                prefix-icon="el-icon-search"
                @blur="handleQuery"
                v-model="queryParams.cQuery">
              </el-input>
              <el-dropdown @command="handleCommand">
                <div class="el-dropdown-link">
                  更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">批量导出</el-dropdown-item>
                  <el-dropdown-item command="2">批量删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <el-table
            v-loading="loading"
            :header-cell-style="{
              'background-color': '#F9F9F9'
            }"
            :data="configList"
            @selection-change="handleSelectionChange"
            border
            :row-class-name="tableClass">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="任务名称" align="left" prop="cTaskNme" sortable width="260">
              <template slot-scope="scope">
                <img src="@/assets/images/rw-xz.png" class="icon img-correct" />{{ scope.row.cTaskNme }}
              </template>
            </el-table-column>
            <el-table-column label="优先级" align="center" prop="cTaskPri" width="100">
              <template slot-scope="scope">
                <div class="highest" v-if="scope.row.cTaskPri == 1">
                  <div class="icon red2"></div>最高
                </div>
                <div class="highest" v-if="scope.row.cTaskPri == 2">
                  <div class="icon orange"></div>较高
                </div>
                <div class="highest" v-if="scope.row.cTaskPri == 3">
                  <div class="icon blue"></div>普通
                </div>
                <div class="highest" v-if="scope.row.cTaskPri == 4">
                  <div class="icon gray"></div>较低
                </div>
              </template>
            </el-table-column>
            <el-table-column label="任务状态" align="center" prop="cTaskState" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.cTaskState == 1" type="info">未开始</el-tag>
                <el-tag v-if="scope.row.cTaskState == 2" type="warning">进行中</el-tag>
                <el-tag v-if="scope.row.cTaskState == 3" type="success">开发完成</el-tag>
                <el-tag v-if="scope.row.cTaskState == 4" type="danger">测试完成</el-tag>
                <el-tag v-if="scope.row.cTaskState == 5" class="primary">已上线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="cCrePer" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.cCrePerNme">
                  <span class="icon-name red">{{ scope.row.cCrePerNme[scope.row.cCrePerNme.length - 1] }}</span>
                  <span>{{ scope.row.cCrePerNme }}</span>
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column label="负责人" align="center" prop="cDemHead" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.cProHeadNme">
                  <span class="icon-name red">{{ scope.row.cProHeadNme[scope.row.cProHeadNme.length - 1] }}</span>
                  <span>{{ scope.row.cProHeadNme }}</span>
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="tCreTm" sortable>
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.tCreTm) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="更新时间" align="center" prop="tUpdTm" sortable>
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.tUpdTm) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="预估工时/剩余工时" align="center" prop="cEstRemWork" sortable>
              <template slot-scope="scope">
                <span>
                  {{ scope.row.cEstRemWork }}
                  <i class="el-icon-edit" style="cursor: pointer;margin-left: 15px" @click="emitWorkTime(scope.row)"></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160" align="center" header-align="left" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleUpdate(scope.row, 'check')"
                >查看</el-button>
                <el-dropdown @command="handleCommand2">
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="handleDelete(scope.row, 'single')"
                  >
                    <el-button
                      size="mini"
                      slot="reference"
                    >删除</el-button>
                  </el-popconfirm>
                  <el-dropdown-menu slot="dropdown" >
                    <el-dropdown-item command="1">复制</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :current-page="queryParams.pageNum"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            @pagination="currentChang"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <addTask ref="addTask" @upDate="getList" />
    <up-date-form ref="UpDateForm" @upDate="getList" />
    <edit-work-time ref="workTime" @emitWork="handleSetWork" />
  </div>
</template>

<script>
import {deleteTask, emitTaskList, list, listNum} from "@/api/projectManage/task";
import {mixin} from "../mixin";
import addTask from "@/views/projectManage/task/addTask";
import UpDateForm from "@/views/projectManage/task/upDateForm";
import EditWorkTime from "@/views/projectManage/demand/editWorkTime";

export default {
  name: "Config",
  components: {EditWorkTime, UpDateForm, addTask},
  mixins: [mixin],
  data() {
    return {
      configList: [],
      loading: false,
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      activeName: null,
      tablist: [
        {
          label: '全部任务',
          num: 0
        },
        {
          label: '未开始',
          num: 0
        },
        {
          label: '进行中',
          num: 0
        },
        {
          label: '开发完成',
          num: 0
        },
        {
          label: '测试完成',
          num: 0
        },
        {
          label: '已上线',
          num: 0
        }
      ],
      projectList: [
        {
          id: 1,
          name: '管理员工作台（政务外网）'
        }
      ],
      defProject: '管理员工作台（政务外网）'
    }
  },
  mounted() {
    this.getList()
    this.getListNum()
    // 添加对 sessionStorage 的监听
    window.addEventListener("setItem", () => {
      this.getList()
    });
  },
  methods: {
    // 请求列表
    getList() {
      this.configList = []
      const params = {
        cTaskState: this.activeName > 0 ? this.activeName : null,
        ...this.queryParams
      }
      this.loading = true
      list(params).then(res => {
        this.configList = res.rows || []
        this.total = res.total || 0
      }).finally(() => this.loading = false)
    },
    // 查询任务数量
    getListNum() {
      this.loading = true
      listNum().then(res => {
        this.tablist[0].num = res.data.cProNum || 0
        this.tablist[1].num = res.data.cProNum1 || 0
        this.tablist[2].num = res.data.cProNum2 || 0
        this.tablist[3].num = res.data.cProNum3 || 0
        this.tablist[4].num = res.data.cProNum4 || 0
        this.tablist[5].num = res.data.cProNum5 || 0
      }).finally(() => this.loading = false)
    },
    // 查询
    handleQuery() {
      this.getList()
    },
    // 修改工时
    emitWorkTime(row) {
      this.$refs.workTime.open(row)
    },
    // 分页
    currentChang(val) {
      this.queryParams.pageNum = val.page
      this.queryParams.pageSize = val.limit
      this.getList()
    },
    // 查看/编辑
    handleUpdate(row) {
      this.$refs.UpDateForm.open({row})
    },
    // 设置工时
    handleSetWork(row) {
      emitTaskList(row).then(res => {
        this.$notify({title: '成功', message: '保存成功！', type: 'success',})
        this.getList()
      })
    },
    // 删除
    handleDelete(row, type) {
      let cTaskNo = ''
      if (type === 'single') {
        cTaskNo = row.cTaskNo
      } else {
        const list = []
        row.forEach(i => list.push(i.cTaskNo))
        cTaskNo = list.join(',')
      }
      deleteTask(cTaskNo).then(res => {
        this.$notify({title: '成功', message: '删除成功！', type: 'success',});
        this.getList()
      }).catch(() =>  this.$notify({title: '警告', message: '删除失败！', type: 'warning'}))
    },
    // 切换项目状态
    handleClick() {
      console.log(this.activeName)
      this.getList()
    },
    // 选择项目
    commandProject(command) {
      console.log(command)
    },
    // 更多操作
    handleCommand(command) {
      console.log(command)
      if (command === '2') {
        this.selectTable.length ?
          this.handleDelete(this.selectTable) :
          this.$notify({title: '警告', message: '请勾选要删除的项目！', type: 'warning'})
      }
    },
    // 操作删除更多按钮
    handleCommand2(command) {
      console.log(command)
    },
    // 提任务
    handleAddDemand() {
      this.$refs.addTask.open()
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/projectManage";
::v-deep .workInput {
  width: 80%;
  .el-input__inner {
    text-align: center;
    border-radius: 20px;
    background: #dedede40;
  }
}
</style>
